<template>
  <div>
    <div style="padding: 0.8rem;">
      <div style="font-weight: bold;font-size: 18px;text-align: left;">当前播放</div>
      <a-row>
        <a-col :span="6">总 {{ currentMusicList == null ? 0 : currentMusicList.length }} 首</a-col>
        <a-col :span="12" style="text-align: right;padding-right: 1rem;">收藏全部</a-col>
        <a-col :span="6" @click="clearCurrentPlayList" style="cursor: pointer;">清空列表</a-col>
      </a-row>
    </div>
    <div class="currentMusicListTable" style="overflow-y:scroll; height: 20rem;">
      <a-table
          row-key="id"
          :showHeader="false"
          :columns="columns"
          :data-source="currentMusicList"
          :pagination="false"
          :customRow="rowClick">
        <a slot="name" slot-scope="text">{{ text }}</a>
      </a-table>
    </div>
  </div>
</template>

<script>
import {getMusicTime} from "@/utils/util";
import Vue from "vue";
import {MUSIC_PLAY_LIST} from "@/store/mutation-types";
import {readyNext} from "@/components/web/util/music";

export default {
  name: "CurrentPlayList",
  data() {
    return {
      currentMusicList: [],
      columns: [
        {
          title: '音乐标题',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '歌手',
          dataIndex: 'author',
          key: 'author',
        },
        {
          title: '时长',
          dataIndex: 'duration',
          key: 'duration',
          ellipsis: true,
          width: 80,
          customRender: function (text) {
            return getMusicTime(text / 1000);
          }
        },
      ]
    }
  },
  mounted() {
    this.initMusicList();
  },
  methods: {
    initMusicList() {
      this.currentMusicList = Vue.ls.get(MUSIC_PLAY_LIST)
    },
    rowClick(record) {
      let _this = this;
      return {
        on: {
          dblclick: () => {
            let musicList = _this.$store.getters.playList;
            let index = 0;
            let len = musicList.length;
            for (let i = 0;i< len;i++) {
              if (record.id == musicList[i].id){
                index = i;
                break;
              }
            }
            readyNext(index,_this.$bg.musicPlayer)
          }
        }
      }
    },
    clearCurrentPlayList() { // 清空播放列表
      this.$store.commit("SET_MUSIC_CLEAR", [])
      this.initMusicList();
    }
  }
}
</script>

<style scoped>

/* 滚动条样式*/
.currentMusicListTable::-webkit-scrollbar {
  width: 7px;
  height: 5px;
}

/*滚动条里面小方块*/
.currentMusicListTable::-webkit-scrollbar-thumb {
  background: #e8e8e8;
  border-radius: 5px;
}

/*滚动条里面轨道*/
.currentMusicListTable::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.2);
  background: #ffffff !important;
}
</style>
